<template>
  <div class="document-manager-wapper">
    <van-nav-bar
      title="仓库区域图"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
      <van-icon name="arrow-left" slot="left" />
      <!--<van-icon name="search" slot="left"/>-->
    </van-nav-bar>
    <div class="document-content" ref="content">
      <div class="cell-content">
        <div class="cell-content-one clearfix">
          <div
            class="one-column one-column-border"
            style="border-left:0px;"
            @click="showInstructionInfo('R1-C-01')"
          >
            <div class="one-column-content ">C1</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-02')"
          >
            <div class="one-column-content ">C2</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-03')"
          >
            <div class="one-column-content ">C3</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-04')"
          >
            <div class="one-column-content ">C4</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-05')"
          >
            <div class="one-column-content ">C5</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-06')"
          >
            <div class="one-column-content">C6</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-07')"
          >
            <div class="one-column-content ">C7</div>
          </div>
          <div
            class="one-column one-column-border"
            @click="showInstructionInfo('R1-C-08')"
          >
            <div class="one-column-content ">C8</div>
          </div>
          <div
            class="one-column one-column-border"
            style="border-right:0px;"
            @click="showInstructionInfo('R1-C-09')"
          >
            <div class="one-column-content ">C9</div>
          </div>
        </div>
        <div class="cell-content-two clearfix" style="background: #07c160;">
          过道
        </div>
        <div class="cell-content-three clearfix">
          <div class="three-column-content">
            <div class="three-column">
              <div
                class="three-column-row"
                @click="showInstructionInfo('R1-B-01')"
              >
                B1
              </div>
              <div
                class="three-column-row"
                style="background: #acf45e85;"
                @click="showInstructionInfo('R1-A-01')"
              >
                A1
              </div>
              <div
                class="three-column-row"
                style="background: #acf45e85;z-index: 999;border: 0px;"
              ></div>
            </div>
            <div class="three-column">
              <div class="three-column-row-two">过道</div>
            </div>
            <div class="three-column column-width">
              <div class="three-column-row" style="border-right:0px;">
                <div
                  class="three-column-row-eight"
                  @click="showInstructionInfo('R1-B-02')"
                >
                  B2
                </div>
                <div
                  class="three-column-row-eight"
                  @click="showInstructionInfo('R1-B-03')"
                >
                  B3
                </div>
                <div
                  class="three-column-row-eight"
                  @click="showInstructionInfo('R1-B-04')"
                >
                  B4
                </div>
                <div
                  class="three-column-row-eight"
                  @click="showInstructionInfo('R1-B-05')"
                >
                  B5
                </div>
                <div
                  class="three-column-row-eight"
                  @click="showInstructionInfo('R1-B-06')"
                >
                  B6
                </div>
                <div
                  class="three-column-row-eight"
                  @click="showInstructionInfo('R1-B-07')"
                >
                  B7
                </div>
                <div
                  class="three-column-row-eight"
                  style="border-right:0px;"
                  @click="showInstructionInfo('R1-B-08')"
                >
                  B8
                </div>
              </div>
              <div class="three-column-row-three" style="border-right:0px;">
                <div
                  class="three-row-one"
                  @click="showInstructionInfo('R1-A-OUT')"
                >
                  out
                </div>
                <div class="three-row-three" style="background:#0000ff;">
                  AVG区域
                </div>
                <div class="three-row-three " style="border-right:0px;">
                  <div
                    class="three-row-three-content"
                    @click="showInstructionInfo('R1-A-07')"
                  >
                    A7
                  </div>
                  <div
                    class="three-row-three-content"
                    @click="showInstructionInfo('R1-A-08')"
                  >
                    A8
                  </div>
                  <div
                    class="three-row-three-content three-row-three-content-border"
                    style="border-right:0px;"
                    @click="showInstructionInfo('R1-A-09')"
                  >
                    A9
                  </div>
                  <!--<div class="three-row-three-content">A10</div>-->
                  <!--<div class="three-row-three-content">A11</div>-->
                  <!--<div class="three-row-three-content three-row-three-content-border"-->
                  <!--style="border-right:0px;">A12-->
                  <!--</div>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cell-content-two clearfix">
          <div class="left-div"></div>

          <div class="right-div">过道</div>
          <div class="in-div" @click="showInstructionInfo('R1-A-IN')">IN</div>
        </div>
        <!--<div style="height: 50%">-->
        <!--<div class="cell-content-two" style="background: #1989fa" @click="showInstructionInfo(1)">-->
        <!--B区-->
        <!--</div>-->
        <!--<div class="cell-content-two" style="background: #969799" @click="showInstructionInfo(2)">-->
        <!--C区-->
        <!--</div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
import { wareList } from "../../assets/json/warehouse";

export default {
  name: "InstructionInfoList",
  data() {
    return {
      list: wareList,
      loading: false,
      finished: false
    };
  },
  methods: {
    onClickLeft() {
      console.log("onClickLeft");
      this.$router.back(-1);
      // this.$router.push({
      //     path: "/search"
      // })
    },
    showInfo(id) {
      this.$router.push({
        path: "/order/info",
        query: {
          id: id
        }
      });
    },
    showInstructionInfo(id) {
      this.$router.push({
        path: "/order/info",
        query: {
          id: id
        }
      });
    }
  },
  mounted() {
    const wrap = this.$refs.content;
    console.log(wrap.clientWidth);
    if (wrap.clientWidth > 380) {
      wrap.style.setProperty("--n", 3);
    } else {
      wrap.style.setProperty("--n", 1);
    }
    // let inLenght = wrap.children.length;
  }
};
</script>

<style scoped lang="scss">
.document-manager-wapper {
  position: relative;
  .document-content {
    position: relative;
    top: 46px;
    height: calc(100%);
    display: flex;
    justify-items: center;
    align-items: center;
    .cell-content {
      /*padding: 10px;*/
      position: relative;
      width: 100%;
      /*height: 260px;*/
      border: solid 1px #ddd;
      margin: 10px;
      background: #fff;
      /*border-radius: 4px;*/
      .cell-content-one {
        position: relative;

        text-align: center;
        /*font-weight: bold;*/
        font-size: 14px;
        color: #fff;
        display: flex;
        width: 100%;
        /*line-height: 120px;*/
        /*cursor: pointer;*/
        .one-column {
          width: (100% / 9);
          height: 0px;
          border: solid 1px #ddd;
          border-right: 0px;
          background: #acf45e85;
          /*display: inline-block;*/
          padding-bottom: (100% / 9);
          font-size: 14px;
          /*font-weight: bold;*/
          color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          background-size: contain;
          position: relative;
          .one-column-content {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            justify-content: center; //子元素水平居中
            align-items: center; //子元素垂直居中
            display: -webkit-flex;
          }
        }

        .one-column:last-child {
          border-right: solid 1px #ddd;
        }
        .one-column-border {
          border-top: 0px;
        }
      }
      .cell-content-two {
        height: 30px;
        width: 100%;
        /*display: inline-block;*/
        text-align: center;
        /*font-weight: bold;*/
        font-size: 14px;
        color: #000;
        line-height: 30px;
        position: relative;

        .in-div {
          position: absolute;
          bottom: 0px;
          left: 5%;
          height: 200%;
          width: 5%;
          justify-content: center; //子元素水平居中
          align-items: center; //子元素垂直居中
          display: -webkit-flex;
          border: solid 1px #ddd;
          border-bottom: 0px;
        }
        .left-div {
          position: relative;
          /*bottom: 0px;*/
          /*left: 0px;*/
          height: 100%;
          width: 10%;
          background: #acf45e85;
          opacity: 1;
          display: inline-block;
        }
        .right-div {
          position: relative;
          /*bottom: 0px;*/
          /*left: 0px;*/
          height: 100%;
          width: 90%;
          background: #07c160;
          opacity: 1;
          display: inline-block;
          vertical-align: top;
        }
      }

      .cell-content-three {
        width: 100%;
        padding-bottom: (100% / 3);
        position: relative;
        /*border: solid 1px yellow;*/
        .three-column-content {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          .three-column {
            width: (100% / 9);
            height: 100%;
            position: relative;
            /*border: solid 1px yellow;*/
            .three-column-row {
              position: relative;
              justify-content: center; //子元素水平居中
              align-items: center; //子元素垂直居中
              display: -webkit-flex;
              height: (100% / 3);
              background: #acf45e85;
              border: solid 1px #ddd;
              .three-column-row-eight {
                width: (100% / 7);
                position: relative;
                justify-content: center; //子元素水平居中
                align-items: center; //子元素垂直居中
                display: -webkit-flex;
                height: 100%;
                border-right: solid 1px #ddd;
              }
            }
            .three-column-row-two {
              position: relative;
              justify-content: center; //子元素水平居中
              align-items: center; //子元素垂直居中
              display: -webkit-flex;
              height: (100%);
              /*border: solid 1px #ddd;*/
              width: 100%;
              writing-mode: vertical-lr;
              background: #07c160;
            }
            .three-column-row-three {
              position: relative;
              width: 100%;
              height: (100% / 3 * 2);
              border: solid 1px #ddd;
              border-top: 0px;
              display: -webkit-flex;
              .three-row-one {
                position: relative;
                width: (100% / 7);
                justify-content: center; //子元素水平居中
                align-items: center; //子元素垂直居中
                display: -webkit-flex;
                border-right: solid 1px #ddd;
                background: #acf45e85;
              }
              .three-row-three {
                position: relative;
                width: (100% / 7 * 3);
                justify-content: center; //子元素水平居中
                align-items: center; //子元素垂直居中
                display: -webkit-flex;
                border-right: solid 1px #ddd;
                flex-wrap: wrap;
                .three-row-three-content {
                  position: relative;
                  width: (100% / 3);
                  height: (100%);
                  justify-content: center; //子元素水平居中
                  align-items: center; //子元素垂直居中
                  display: -webkit-flex;
                  border-right: solid 1px #ddd;
                  border-bottom: solid 1px #ddd;
                  background: #acf45e85;
                }
                .three-row-three-content-border {
                  border-right: 0px;
                }
              }
            }
          }
          .column-width {
            width: (100% / 9 * 8);
          }
        }
      }
    }
  }
}
</style>
